<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> 
<script>
$(document).ready(function() {

	('.l2').hide();
});
$('#l1').click(function() {
  $('li').toggle('slow', function() {
    // Animation complete.
  });
});
</script>
<style>
	.l1{
		float:left;
	}
	a{
		display:block;
	}
</style>
</head>
<body>
	<div class="d1">
		<ul>
			<li class="l1" id="l1">Ana1
				<ul>
					<li class="l2"><a href="#">a1</a></li>
					<li class="l2"><a href="#">a1</a></li>
					<li class="l2"><a href="#">a1</a></li>
					<li class="l2"><a href="#">a1</a></li>
					<li class="l2"><a href="#">a1</a></li>
				</ul>
			</li>
			<li class="l1">Ana 2
				<ul>
					<li>b1</li>
					<li>b2</li>
					<li>b3</li>
					<li>b4</li>
				</ul>
			</li>
			<li class="l1">Ana 3
				<ul>
					<li>c1</li>
					<li>c2</li>
					<li>c3</li>
					<li>c4</li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>